<template>
    <div>
        <div class="head"></div>
        <!--中部-->
        <div style="display: flex; position: relative; left: 16.666%">
            <div style="width: 16%;">
                <!--导航菜单-->
                <div>
                    <div style="background-color: #21af3e; height: 45px; line-height: 45px; color: #FFF;padding-left: 10px">
                        <h2>新闻资讯</h2></div>
                    <List border>
                        <ListItem @click.native="tt('公司动态')">公司动态</ListItem>
                        <ListItem @click.native="tt('行业资讯')">行业资讯</ListItem>
                        <ListItem @click.native="tt('客户评价')">客户评价</ListItem>
                    </List>
                    <br>
                </div>
                <!--联系-->
                <div>
                    <Row>
                        <lianxi/>
                    </Row>
                </div>
            </div>
            <div style="margin-left: 10px; width: 50%;">
                <div style="border-bottom: #DDDDDD 1px solid; background: #f0f0f0; display: flex; line-height: 43px">
                    <div style="width: 30%; text-align: left; color:#21af3e;padding-left: 10px"><h2>{{tabName}}</h2></div>
                    <div style="width: 70%;text-align:right;padding-right:8px">
                        当前位置：
                        <a href="src/views/Home.vue">首页</a>>
                        <a>新闻资讯</a>>
                        <a>{{tabName}}</a>
                    </div>
                </div>
                <!--公司简介 -->
                <div class="msgbody">
                    <div class="trade" v-if="tabName==='公司动态'">
                        <Row>
                            <Col span="16">
                                <a href="#">远程客服电话系统的优势</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">安防监控系统都会使用到哪些显示屏？</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">如何避免高温损坏安防监控系统？</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">安防监控到底有哪些好处？</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">家居安防监控系统为何如此受欢迎？</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">面对复杂的综合布线故障，专业技术人员是怎么？</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">浅谈综合布线的接地类型有哪些</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                    </div>
                    <div class="trade" v-if="tabName==='行业资讯'">
                        <Row>
                            <Col span="16">
                                <a href="#">分享综合布线中常用到的三大布线系统</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">门禁系统在生活中的应用</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">智能门禁系统这些你要注意的事项</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">校园人脸门禁系统的好处分析</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">多媒体会议系统中使用的发布屏应该具备哪些功</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">门禁系统的逻辑控制方式有哪些应用？</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">安防监控系统对网络带宽的三大要求</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                    </div>
                    <div class="trade" v-if="tabName==='客户评价'">
                        <Row>
                            <Col span="16">
                                <a href="#">九龙仓大型办公室综合布线</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">专业、效率</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">一天就把我店里装好了</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">中型超市监控系统 长沙吴总</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">别墅监控系统 长沙美洲故事</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">某小区监控覆盖 高经理？</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="16">
                                <a href="#">奇美物业经理 效率快</a>
                            </Col>
                            <Col span="8" align="right" style="padding-right:15px">
                                <span>2020-04-21 13:36:04</span>
                            </Col>
                        </Row>
                    </div>
                </div>
            </div>
            <div v-if="tabName===2" style="margin-left: 10px">
                <div style="border-bottom: #DDDDDD 1px solid; background: #f0f0f0; display: flex; line-height: 43px">
                    <div style="width: 70%; text-align: left; color:#21af3e;padding-left: 10px"><h2>荣誉资质</h2></div>
                    <div style="width: 30%">
                        当前位置：
                        <a>首页</a>>
                        <a>关于我们</a>>
                        <a>荣誉资质</a>
                    </div>
                </div>
                <!--资质图 -->
                <div class="zz"
                     style=" border:2px solid #cacece;">
                    <img src="../../assets/index/case/zizhi.jpg"/>
                    <img src="../../assets/index/case/zizhi.jpg"/>
                    <img src="../../assets/index/case/zizhi.jpg"/>
                    <br>
                    <img src="../../assets/index/case/zizhi.jpg"/>
                    <img src="../../assets/index/case/zizhi.jpg"/>
                    <img src="../../assets/index/case/zizhi.jpg"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import h from '@/components/h.vue'
    import f from '@/components/f.vue'
    import lianxi from '@/components/lianxi.vue'

    export default {
        name: 'Xwzx',
        components: {
            h, f, lianxi
        },
        data() {
            return {
                tabName: '公司动态'
            }

        },
        methods: {
            tt: function (t) {
                this.tabName = t;
            }
        }

    }

</script>

<style scoped>
    .head {
        height: 315px;
        background: url(../../assets/xwzx/img07.jpg) bottom no-repeat !important;
    }

    ul, ol, li {
        list-style: none;
    }

    body {
        font-family: "Microsoft YaHei";
        font-size: 14px;
        color: #333;
    }

    .zz img {
        margin-left: 10px;
    }

    .msgbody {
        border: 1px solid #cacece;
        font-size: 14px;
        text-indent: 2em;
        text-align: left;
        line-height: 26px;
        padding: 15px 0 13px 20px;
    }
    .msgbody a{
        font-size: 15px;
        font-weight: bold;
        color: #666;
    }
    .msgbody a:link{
        text-decoration: none;
    }
    .msgbody a:hover{
        border-bottom: 1px solid #666;
    }

    .trade .ivu-row{
        margin-bottom: 39px;
    }
</style>